import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class List extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        {name: 'macbook pro', id: 1},
        {name: 'magicbook', id: 2},
        {name: 'matebook', id: 3},
        {name: 'mibook', id: 4},
      ]
    }
  }
  render() {
    return (
      <div>
        {
          this.state.list.map(item => {
            return (
              <div key={item.id}>
                <NavLink to={'/detail/'+item.name}>{item.name}</NavLink>
              </div>
            )
          })
        }
      </div>
    );
  }
}

export default List;
